<template>
	<view class="content">
		<view class="statusBox bg_orange"></view>
		<view class="Titles bg_orange">
			<image class="iconBack" src="/static/index/icon_back2.png" mode="" @tap="btnBack"></image>
			<view class="name textCenter">限时秒杀</view>
		</view>
		<view class="clearBoth"></view>
		<view class="index_bg bg_orange">
			<uni-swiper-dot class="swiper" :info="bannerList" :current="current" mode="round" :dotsStyles="dotsStyles">
				<swiper class="swiper-box swiper" @change="change" autoplay="autoplay" circular="true">  
					<swiper-item v-for="(item, indexc) in bannerList" :key="indexc"  @tap="tapBanner(item)">
						<image class="swiperitem banner"  :src="item.src"/>  
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="twoBox bg_orange">
			<view class="blockBox" v-for="(item,index) in iconList" :key="index" @tap="thisIcon(item.id)">
				<view class="block">
					<view class="title fontSemiBold">{{item.name}}</view>
					<view class="names">限时秒杀</view>
					<view class="go bg_orange">去抢购<uni-icons type="arrowright" color="white" size="12" /></view>
				</view>
				<image class="covers" :src="item.src" mode="widthFix"></image>
			</view>
			<!-- <view class="blockBox">
				<view class="block">
					<view class="title fontSemiBold">4.9元专区</view>
					<view class="names">限时秒杀</view>
					<view class="go bg_orange">去抢购<uni-icons type="arrowright" color="white" size="12" /></view>
				</view>
				<image class="covers" src="/static/del/del_12.png" mode="widthFix"></image>
			</view> -->
		</view>
		
		<view class="searchBox bg_orange">
			<view class="search">
				<uni-icons class="icons" type="search" color="#999999" size="16"/>
				<input class="searchInput" :value="inputValue" type="text" placeholder="请输入关键词" @input="getValue" @confirm="searBtn">
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="scrollBoxTop bg_orange">
			<image class="nameImage" src="/static/index/seckill/icon_1.png" mode=""></image>
			<view class="scrollBox">
				<view class="scrollBoxBody" :style="{width:seckillListWidth}" >
					<view class="scroolBoxMin" :class="item.type==1?'unuse':''" v-for="(item,index) in seckillList" :key="index">
						<view class="time fontSemiBold">{{item.time}}</view>
						<view class="type" v-if="item.type==0">进行中</view>
						<view class="types" v-if="item.type==1">未开始</view>
					</view>
				</view>
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="things">
			<view class="timeBox">
				<view class="timeName">离本场结束</view>
				<view class="time fontSemiBold" v-if="typeTime.show">{{typeTime.time}}</view>
			</view>
			<view class="scollBoxs">
				<view class="scollType" :style="{width:scrollTypeBoxWidth}">
					<view class="typeBox" :class=" item.thisOne ? '':'typeBoxs'  " v-for="(item,index) in scrollTypeBox" :key="index" @tap="beThisType(index,item.id)">{{item.name}}</view>
				</view>
			</view>
			<view class="rowsList" v-for="(item,index) in thingsList" :key="index">
				<image class="cover" :src="item.cover" mode=""></image>
				<view class="right">
					<view class="title overflow_one">{{item.title}}</view>
					<view class="progressBox">
						<view class="progress" :style="{width:item.progress+'%'}">{{item.progress}}%</view>
					</view>
					<view class="use">已拼{{item.useNumber}}件</view>
					<view class="clearBoth"></view>
					<view class="type">限时直降{{item.lessMoney}}元</view>
					<view class="clearBoth"></view>
					<view class="priceBox">
						<view class="priceIcon">¥</view>
						<view class="price fontSemiBold">{{item.price}}</view>
						<s class="beforePrice" v-show="item.beforePrice">¥{{item.beforePrice}}</s>
					</view>
					<view class="clearBoth"></view>
					<view class="goNow" @tap="inDetails(item.id,item.goods_id)">马上抢</view>
				</view>
				<view class="clearBoth"></view>
			</view>
		</view>
		
		
		
		
		
		
	</view>
</template>
<style>
	.content{}
	.content .bg_orange{background: rgb(220,88,42);}
	.content .Titles{width: 100%;height:64upx;position: fixed;top:110upx;left: 0;z-index: 7;}
	/* .content .Titles{width: 100%;height:120upx;position: fixed;top:110upx;left: 0;z-index: 7;} */
	.content .Titles .iconBack{width: 24upx;height:40upx;position: absolute;left:5%;top:10upx}
	.content .Titles .name{height:60upx;line-height: 60upx;font-size: 40upx;font-weight: bold;color:white}
	.content .index_bg{width: 100%;height:430upx;margin-top: 150upx;}
	.content .swiper{width:100%;height:430upx;margin-top: 75upx;overflow: hidden;}
	.content .banner{width:90%;height:280upx;margin-left:5%;border-radius:10upx;}
	.content .twoBox{width:100%;padding:0 2.5%;margin-left:0%;display: flex;justify-content:space-around;}
	.content .twoBox .blockBox{width:45%;padding:2.5%;background: white;border-radius: 10upx;}
	.content .twoBox .blockBox .block{width: 55%;display: flex;justify-content: left;flex-wrap: wrap;float: left;}
	.content .twoBox .blockBox .block .title{width: 100%;height:40upx;line-height: 40upx;color:#DC582A;font-weight: bold;font-size: 32upx;}
	.content .twoBox .blockBox .block .names{width: 100%;color:#BBBBBB;font-size: 20upx;margin:0upx 0 30upx 0;}
	.content .twoBox .blockBox .block .go{width: auto;color:#FFFFFF;font-size: 22upx;border-radius: 100upx;padding:5upx 10upx;}
	.content .twoBox .blockBox .covers{width:45%;height:180upx;}
	.searchBox{background: white;padding:40upx 0;}
	.searchBox .search{width:90%;margin-left: 5%;padding:0upx 2.5%;height:88upx;line-height: 88upx;display: flex;justify-content: center;background:rgb(245,245,249);border-radius: 100upx;position: relative;}
	.searchBox .search .icons{}
	.searchBox .search .searchInput{width:auto;color:#999999;text-align: center;font-size: 30upx;height:88upx;line-height: 88upx;margin-left:10upx;}
	.searchBox .search .uni-input-placeholder{font-size: 30upx;text-align: left;}
	.content .scrollBoxTop{width: 100%;padding:0 5%;padding-bottom: 100upx;}
	.content .scrollBoxTop .nameImage{width: 130upx;height:140upx;margin-right: 20upx;float: left;}
	.content .scrollBoxTop .scrollBox{float:left;width: 75%;overflow-x: scroll;}
	.content .scrollBoxTop .scrollBox .scrollBoxBody{width: auto;}
	.content .scrollBoxTop .scrollBox .scrollBoxBody .scroolBoxMin{width: 140upx;height:155upx;float: left;margin-right: 20upx;background: white;border-radius: 10upx;}
	.content .scrollBoxTop .scrollBox .scrollBoxBody .unuse{background: rgb(231,138,106);}
	.content .scrollBoxTop .scrollBox .scrollBoxBody .scroolBoxMin .time{font-weight: bold;color:#DC582A;font-size: 50upx;text-align: center;padding:0upx 0 10upx 0}
	.content .scrollBoxTop .scrollBox .scrollBoxBody .scroolBoxMin .type{width: 70%;padding:5upx 10upx;margin-left: 15%;text-align: center;border-radius: 100upx;color:white;background: #DC582A;font-size: 26upx;}
	.content .scrollBoxTop .scrollBox .scrollBoxBody .scroolBoxMin .types{width: 70%;margin-left: 15%;text-align: center;border-radius: 100upx;color:#DC582A;font-size: 26upx;}
	.content .things{width: 100%;padding:5%;border-top-left-radius: 40upx;border-top-right-radius: 40upx;position: relative;top:-40upx;background: white}
	.content .things .timeBox{width:60%;height:80upx;line-height: 80upx;background:white;box-shadow: 10upx 10upx 20upx #ccc;border-radius: 100upx;display: flex;justify-content: center;position: absolute;top:-40upx;left:20%;}
	.content .things .timeBox .timeName{font-size: 32upx;color:#262626;}
	.content .things .timeBox .time{font-size: 32upx;color:#262626;font-weight: bold;margin-left: 20upx;}
	.content .things .scollBoxs{width: 100%;margin-top: 40upx;overflow-x: scroll;}
	.content .things .scollBoxs .scollType{width: 1200upx;display: flex;justify-content: left;}
	.content .things .scollBoxs .scollType .typeBox{width: 150upx;margin-right: 20upx;padding:10upx 0;background: rgb(220,88,42);color:white;border-radius: 10upx;text-align: center;}
	.content .things .scollBoxs .scollType .typeBoxs{width: 150upx;margin-right: 20upx;padding:10upx 0;background: rgb(245,245,249);color:#262626;border-radius: 10upx;text-align: center;}
	.content .things .rowsList{width: 100%;margin:40upx 0 0upx 0;}
	.content .things .rowsList .cover{width: 200upx;height: 200upx;border-radius: 10upx;float: left;margin-right: 20upx;}
	.content .things .rowsList .right{width:65%;float: left;position: relative;}
	.content .things .rowsList .right .title{width:100%;font-weight: bold;font-size: 32upx;}
	.content .things .rowsList .right .progressBox{width:50%;height:40upx;margin:10upx 0 20upx 0;border-radius: 100upx;float:left;position: relative;background:rgb(251,238,233);}/*  */
	.content .things .rowsList .right .progressBox .progress{width: 70%;text-align: right;height:40upx;line-height:40upx;font-size: 16upx;color:white;border-radius: 100upx;;position: absolute;top:0;left:0%;padding-right:5%;background: rgb(220,88,42);}
	.content .things .rowsList .right .use{float: left;margin:10upx 0 20upx 40upx;color:#BBBBBB;font-size: 22upx;}
	.content .things .rowsList .right .type{color:#DC582A;font-size: 20upx;background: rgb(251,237,232);float: left;}
	.content .things .rowsList .right .priceBox{}
	.content .things .rowsList .right .priceBox .priceIcon{font-size:28upx;color:#DC582A;font-weight: bold;float:left;height:80upx;line-height: 80upx;}
	.content .things .rowsList .right .priceBox .price{font-size:48upx;color:#DC582A;font-weight: bold;float:left;height:80upx;line-height: 80upx;margin-left: 10upx;}
	.content .things .rowsList .right .priceBox .beforePrice{font-size:24upx;color:#BBBBBB;font-weight: bold;float:left;height:80upx;line-height: 80upx;margin-left: 10upx;margin-top: 5upx;}
	.content .things .rowsList .right .goNow{width:120upx;height:50upx;line-height: 50upx;text-align: center;background: rgb(220,88,42);color:white;border-radius: 10upx;font-size: 30upx;position: absolute;bottom:20upx;right:0;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components:{
			uniSwiperDot,
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				bannerList:[
					// {src:"/static/index/banner.png"},
					// {src:"/static/index/banner.png"},
					// {src:"/static/index/banner.png"}
				],
				current:0,
				dotsStyles:{
					bottom:60,
					backgroundColor: 'rgba(255,255,255,0.5)',
					border: '1px solid none',
					color: 'none',
					selectedBackgroundColor: 'white',
					selectedBorder: '1px none solid'
				},
				inputValue:"",
				seckillList:[
					// {id:1,time:"12:00",type:0},
					// {id:2,time:"14:00",type:1},
					// {id:3,time:"16:00",type:1},
					// {id:4,time:"20:00",type:1},
					// {id:5,time:"22:00",type:1},
				],
				seckillListWidth:"",
				scrollTypeBox:[
					// {id:1,thisOne:true,name:"今日推荐"},
					// {id:1,thisOne:false,name:"今日推荐2"},
					// {id:1,thisOne:false,name:"今日推荐3"},
					// {id:1,thisOne:false,name:"今日推荐4"},
					// {id:1,thisOne:false,name:"今日推荐5"},
					// {id:1,thisOne:false,name:"今日推荐6"},
				],
				scrollTypeBoxWidth:"",
				typeTime:{
					time:"",
					show:false,
				},
				thingsList:[
					// {id:1,cover:"/static/del/del_4.png",title:"这是标题这是标题这是标题这是标题",progress:"90",useNumber:123,lessMoney:3,price:123,beforePrice:321},
					// {id:2,cover:"/static/del/del_4.png",title:"这是标题这是标题这是标题这是标题",progress:"70",useNumber:123,lessMoney:3,price:123,beforePrice:321},
					// {id:3,cover:"/static/del/del_4.png",title:"这是标题这是标题这是标题这是标题",progress:"50",useNumber:123,lessMoney:3,price:123,beforePrice:321},
				],
				iconList:[],
				pages:1
				
				
				
				
				
				
				
			}
		},
		onLoad(){
			this.AjaxLoad()
		},
		onReachBottom(){
			this.pages++
			this.AjaxLoadList()
		},
		methods: {
			AjaxLoadList(){
				uni.showLoading({
					title:"加载中..."
				})
				var nowtime = "",cate_id = ""
				for (var i = 0; i < this.seckillList.length; i++) {
					if( this.seckillList[i].type == 0 )nowtime = this.seckillList[i].timeStamp
				}
				for (var i = 0; i < this.scrollTypeBox.length; i++) {
					if( this.scrollTypeBox[i].thisOne == true )cate_id = this.scrollTypeBox[i].id
				}
				var thingsList = []
				let param={
					token:this._$userToken("userInfo").token,
					page:this.pages,
					nowtime:nowtime,
					cate_id:cate_id
				};
				this._$InitRequest.request('rush_activity/index', param).then(res => {
					res.data.goodres.forEach( (item) =>{
						thingsList.push({
							id:item.id,
							goods_id:item.goods_id,
							cover:item.thumb_url,
							title:item.goods_name,
							progress:item.yslv,
							useNumber:item.pin_sale,
							lessMoney:item.zhijiang,
							price:item.price,
						})
					})
					for (var i = 0; i < thingsList.length; i++){this.thingsList.push( thingsList[i] )}
					setTimeout(function(){
						uni.hideLoading()
					},1000)
				},error=>{})
				
			},
			AjaxLoad(){
				var seckillList = []
				var type = 1,indexs = ""
				let param={
					token:this._$userToken("userInfo").token,
				};
				this._$InitRequest.request("rush_activity/getrushtime", param).then(res => {
					res.data.forEach( (item,index) =>{
						if( item.show == 1 ){
							type = 0
						}else{
							type = 1
						}
						if( item.show == 1 ){
							indexs = index
							this.typeTime.time = item.end_time
							this.computeTime(this.typeTime.time);
						}
						if( indexs ){
							seckillList.push({
								timeStamp:item.time,
								time:item.date,
								type:type
							})
						}
					})
					for (var i = 0; i < seckillList.length; i++){this.seckillList.push( seckillList[i] )}
					for (var i = 0; i < this.seckillList.length; i++) {
						if( this.seckillList[i].type == 0 ){
							this.AjaxTime(this.seckillList[i].time)
						}
					}
					this.seckillListWidth = this.seckillList.length * 95 + "px"
				},error=>{})
			},
			AjaxTime(e){
				var iconList = [],scrollTypeBox = [],bannerList = []
				var thisOnec = false,storeId = "",goodsId = ""
				let param={
					token:this._$userToken("userInfo").token,
					nowtime:e,
				};
				this._$InitRequest.request('rush_activity/getrushcategory', param).then(res => {
					//icon
					res.data.recommend.forEach( (item) =>{
						iconList.push({
							id:item.id,
							name:item.cate_name,
							src:item.cate_pic,
						})
					})
					for (var i = 0; i < iconList.length; i++){this.iconList.push( iconList[i] )}
					
					//scrollTypeBox
					res.data.cate.forEach( (item,index) =>{
						if( index == 0 ){
							thisOnec = true
						}else{
							thisOnec = false
						}
						scrollTypeBox.push({
							id:item.id,
							name:item.cate_name,
							thisOne:thisOnec,
						})
					})
					for (var i = 0; i < scrollTypeBox.length; i++){this.scrollTypeBox.push( scrollTypeBox[i] )}
					
					//bannerList
					res.data.banner.forEach( (item) =>{
						if( item.canshu.split(":")[0] == 1 ){
							goodsId = item.canshu.split(":")[1]
						}else if( item.canshu.split(":")[0] == 2 ){
							storeId = item.canshu.split(":")[1]
						}
						
						bannerList.push({
							id:item.id,
							goodsId:goodsId,
							storeId:storeId,
							canshu:item.canshu,
							src:item.pic,
						})
					})
					for (var i = 0; i < bannerList.length; i++){this.bannerList.push( bannerList[i] )}
					
					this.scrollTypeBoxWidth = this.scrollTypeBox.length * 85 + "px"
					this.AjaxLoadList()
				},error=>{})
			},
			computeTime(time){
				var that = this;
				var dateEnd = new Date();
				var dateDiff = time*1000 - dateEnd.getTime();
				var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
				var leave1=dateDiff%(24*3600*1000)
				var hour=Math.floor(leave1/(3600*1000))
				var leave2=leave1%(3600*1000)
				var minute=Math.floor(leave2/(60*1000))
				var leave3=leave2%(60*1000)
				var second=Math.round(leave3/1000)
				var timer = setInterval(function(){
					second--
					if( second <= 0 ){
						minute -= 1
						second = 59
					}
					if( minute < 0 ){
						hour -= 1
						minute = 59
						second = 60
					}
					if( hour == 0 && minute == 0 && second == 1 ){
						that.typeTime.show = false
					}
					that.typeTime.time = hour+":"+minute+":"+second
					that.typeTime.show = true
				},1000)
			},
			btnBack(){uni.navigateBack({delta:1})},
			change(e){this.current = e.detail.current},
			tapBanner(e){
				if( e.goodsId ){
					uni.navigateTo({
						url:"/pages_index/pages/details/details?id=" + e.goodsId
					})
				}
				if( e.storeId ){
					uni.navigateTo({
						url:"/pages_index/pages/store_home/store_home?id=" + e.storeId
					})
				}
			},
			getValue(e){this.inputValue = e.target.value},
			searBtn(){
				if( this.inputValue == "" ){
					uni.showToast({icon:"none",title:"请输入搜索内容"})
					return;
				}else{
					uni.navigateTo({
						url:"/pages_index/pages/seckill_search/seckill_search?name=" + this.inputValue
					})
				}
			},
			beThisType(index,id){
				for (var i = 0; i < this.scrollTypeBox.length; i++) {
					this.scrollTypeBox[i].thisOne = false
				}
				this.scrollTypeBox[index].thisOne = true
				
				this.pages = 1
				this.thingsList = []
				this.AjaxLoadList()
			},
			inDetails(id,ids){
				uni.navigateTo({
					url:"/pages_index/pages/seckill/details?id=" + id + "&goods_id=" + ids
				})
			},
			thisIcon(id){
				uni.navigateTo({
					url:"/pages_index/pages/seckill_search/seckill_search?id=" + id
				})
			},
			
			
			
			
			
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>